<template>
	<view class="pro_banner">
		<!-- 商品banner图 -->
		<view class="top_banner">
			<swiper class="swiper" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .5)" @change="changeNum" :circular="true">
				<swiper-item v-for="(item,index) in productDetail.carousel" :key="index">
					<image class="pic" :src="item" mode="" @tap="previewImage(index)" :lazy-load="true"></image>
				</swiper-item>
			</swiper>
			<view class="pic_num">
				{{pic_current}}/{{banner_num}}
			</view>
		</view>
		<!-- 商品简介 -->
		<view class="goods">
			<view class="">
				<view class="title1">{{productDetail.name}}</view>
				<view class="title2">{{productDetail.brief}}</view>
				<view class="price">
					<view class="price_now">￥<text>{{productDetail.price}}</text></view>
					<view class="price_line" v-if="productDetail.cost_price">￥{{productDetail.cost_price}}</view>
				</view>
			</view>
			<view class="goods_right">已售{{productDetail.invet_sales+productDetail.sales}}份</view>
		</view>
		<!-- 优惠 规格 -->
		<view class="choose_item">
			<!-- 优惠 -->
			<!-- <view class="favorable" @tap="openFavorable">
				<view class="favorable_f">
					<view class="favorable_tips">
						优惠
					</view>
					<view class="favorable_favorable">
						<view class="favorable_favorable_coupon" v-if="productDetail.coupon > 0">
							<view class="hint">
								领券
							</view>
							<view class="discount_coupon">
								请领取优惠劵
							</view>
						</view>
						<view class="favorable_favorable_coupon" v-else>
							<view class="discount_coupon">
								暂无优惠券可领
							</view>
						</view>
					</view>
				</view>
				<i class="icon">&#xe637;</i>
			</view> -->
			<!-- 规格 -->
			<view class="standard" @tap="choosestandard">
				<view class="standard_tips">选择</view>
				<view class="standard_choose">
					<text>{{choose_size}}</text>
					<i class="icon">&#xe637;</i>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="goods_detail_1">商品详情</view>
			<view class="goods_detail_2" v-for="(item,index) in productDetail.sttr" :key="index">{{item.label}}：{{item.value}}</view>
			<!-- <view v-html="detail_pic"></view> -->
			<rich-text :nodes="detail_pic"></rich-text>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="bottom_left">
				<view class="customerService" @tap="toservice">
					<image :src="Url+'mine/index/customer_service.png'" mode="widthFix"></image>
					客服
				</view>
				<view class="relay" @tap="sharpro">
					<image :src="Url+'mine/index/share.png'" mode="widthFix"></image>
					分享
				</view>
			</view>
			<view class="bottom_right" v-if="productDetail.stock">
				<view class="btn_left" @tap="joinCart">
					加入购物车
				</view>
				<view class="btn_right" @tap="rightNowBuy">
					立即购买
				</view>
			</view>
			<view v-else class=" btn_noStock" >暂无库存</view>
		</view>
		<!-- 选择规格 弹窗 -->
		<uni-popup ref="standard" type="bottom">
			<view class="standard_content">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_info">
					<image class="pro_pic" :src="detailkutype.Stockpic ? detailkutype.Stockpic : productDetail.cover" mode="aspectFill" @tap="previewSizImage"></image>
					<view class="product_info_info" v-if="showSize">
						<view class="price">
							<text class="price_flag">￥</text>
							{{detailkutype.price}}
							<text class="price_line">￥{{productDetail.cost_price}}</text>
						</view>
						<view class="inventory">库存{{detailkutype.Stock ? detailkutype.Stock : 0}}件</view>
						<view class="tochoose" v-if="detailkutype.selectArr.length">已选择
							<text v-if="choose_size  != '请选择规格' && choose_size  != ','" >{{choose_size}}</text>
						</view>
						<view class="tochoose" v-else>请选择</view>
					</view>
					<view class="product_info_info" v-if="!showSize">
						<view class="price">
							<text class="price_flag">￥</text>{{productDetail.price}}<text class="price_line" v-if="productDetail.cost_price">￥{{productDetail.cost_price}}</text>
						</view>
						<view class="inventory">库存{{productDetail.stock}}件</view>

					</view>
				</view>
				<!-- 具体规格 -->
				<view v-if="detailSku.totalSize  !==undefined && detailSku.totalSize.length > 0 ">
					<view class="weight" v-for="(item,index) in detailSku.totalSize" :key="index">
						<view class="tilte">{{item.name}}</view>
						<view class="choose_weight_list">
							<view v-for="(it, n) in item.attr" :key="n" :data-n="n" :data-index="index" :data-sub="detailkutype.subIndex[index]"
							 :class="['product_weight', detailkutype.subIndex[index] === n ? 'product_weight_i' : '',it.isShow ? '' : 'product_weight_n']"
							 @tap="$emit('specificationBtn',it.val,index,$event,n,it.isShow)">
								{{it.val}}
							</view>
						</view>
					</view>
				</view>
				<view class="buy_num">
					<view class="title">
						购买数量<text v-if="productDetail.limit_num > 0">（每人限购{{productDetail.limit_num}}件）</text>
					</view>
					<view class="num">
						<image :src="Url+'add_images/sub_btn_01.png'" mode="" @tap="jian_buyNum"></image>
						<text>{{buy_num}}</text>
						<image :src="Url+'add_images/add_btn_01.png'" mode="" @tap="add_buyNum"></image>
					</view>
				</view>
				<view v-if="productDetail.stock">
					<view class="btn" @tap="confirmStand" v-if="!chooseflag">确定</view>
					<view class="bot_choose" v-else>
						<view class="btn_left" @tap="joinCart">
							加入购物车
						</view>
						<view class="btn_right" @tap="rightNowBuy">
							立即购买
						</view>
					</view>
				</view>
				<view v-else>
					<view class="btn_noStock" >暂无库存</view>
				</view>
				
			</view>
		</uni-popup>
		<!-- 分享至 弹窗 -->
		<uni-popup ref="share" type="bottom">
			<view class="product_share">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_share_title">分享至</view>
				<view class="product_share_way">
					<!-- #ifdef MP-WEIXIN -->
					<button class="product_share_way_item share-btn" open-type="share">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="product_share_way_item" @tap="h5Share">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="product_share_way_item" @tap="appShare">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</view>
					<!-- #endif -->
					<view class="product_share_way_item" @tap="sharebanner">
						<image :src="Url+'mine/index/friend.png'" mode=""></image>
						<text>生成分享图</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 生成分享图弹窗 -->
		<share-banner ref="sharebanner" :productId="productDetail.id" tag="0"></share-banner>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="favorable" type="bottom">
			<view class="favorableBox">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="favorableBox_title">
					优惠
				</view>
				<view class="favorableBox_redpaper">
					用红包最多可以抵扣<text>￥{{moreDiscountPrice}} 元</text>
				</view>
				<view class="favorableBox_title_t">
					优惠券
				</view>
				<scroll-view class="favorableBox_discount" scroll-y>
					<coupon @close="closeDrawer" :couponList="discountlist" @Tips="Tips" @select="select" @draw="coupondraw"></coupon>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 联系客服弹窗 -->
		<uni-customer ref='customer'></uni-customer>
		<share-model v-model="shareshow"></share-model>
	</view>
</template>

<script>
	import nowGroup from '@/components/nowgroup/nowgroup.vue'
	import uniCouponList from '@/components/uni-couponlist/uni-couponlist.vue';
	import Coupon from '@/components/coupon/coupon.vue';
	import shareModel from '@/components/shareModel/shareModel.vue';
	import {
		mapActions
	} from 'vuex';
	import {
		coupon,
		skillNormalOrderSubmit,
		cartAdd,
		share
	} from '@/common/productdetail.js';
	import {
		sellerService
	} from '@/common/mine.js';
	import uniCustomer from '@/components/customerService/customer_service.vue';
	import shareBanner from '@/components/sharebanner/sharebanner.vue'
	import {
		debounce
	} from '@/static/js/utils.js';
	// #ifdef H5
	import wxsdk from '@/static/js/wechat.js';
	// #endif
	import {
		shareUrl,
		userCoupon
	} from '@/common/index.js';
	export default {
		components: {
			nowGroup,
			uniCouponList,
			shareModel,
			uniCustomer,
			Coupon,
			shareBanner
		},
		props: ['productDetail', 'detail_pic', 'detailSku', 'detailkutype', 'showSize', 'choose_size', 'banner_num'],
		data() {
			return {
				shareshow: false,
				Url: this.Imgurl,
				buy_num: 1,
				pic_current: 1,
				sharePic: '',
				discountlist: [],
				moreDiscountPrice: 0,
				chooseflag: false,
			}
		},
		methods: {
			...mapActions(['addCartGoods']),
			//预览轮播图
			previewImage: function(index) {
				var i = this.productDetail.carousel; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			previewSizImage() {
				var i = this.detailkutype.Stockpic ? this.detailkutype.Stockpic : this.productDetail.cover; //获取当前页面的轮播图数据
				// console.log("触发", i)
				//uniapp预览轮播图
				uni.previewImage({
					urls: [i], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//h5分享
			h5Share() {
				let that = this;
				// console.log(wxsdk.share)
				this.shareshow = true;
				const {
					productDetail
				} = this;
				shareUrl({
					id: productDetail.id,
					type: '1'
				}).then(res => {
					if (res.code == 1) {
						wxsdk.share({
								title: productDetail.name,
								path: res.msg,
								imageUrl: productDetail.cover,
								desc: productDetail.brief,
								url: 'https://shop.jyecloud.cn/h5/pageB/classify/productdetail?type=1&id=' + productDetail.id
							},
							res => {
								// console.log(res)
								that.shareshow = false;
								this.$refs.share.close();
								that.toast('分享成功');
							}
						);
					}
				}).catch()
			},
			//app分享
			appShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://shop.jyecloud.cn/phone/h5/pageB/classify/productdetail?type=1&id=" + this.productDetail.id,
					title: this.productDetail.name,
					summary: this.productDetail.brief,
					imageUrl: this.productDetail.cover,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			changeNum(e) {
				// console.log(e.detail)
				this.pic_current = e.detail.current + 1
			},
			jian_buyNum() {
				if (this.buy_num > 1) {
					this.buy_num--
				}
			},
			add_buyNum() {
				let limit_num = this.productDetail.limit_num //限购数量
				let remaining = limit_num - this.productDetail.user_buy_num //限购数量 - 已买数量
				let stock = 0 //库存数量
				// console.log(this.detailkutype)
				if (this.showSize) {
					stock = this.detailkutype.Stock
				} else {
					stock = this.productDetail.stock
				}
				if(limit_num > 0){//限购
					if(remaining > stock){
						if(this.buy_num < stock){
							this.buy_num ++;
						}else{
							this.toast("您购买的商品数量已达到商品库存数量")
						}
					}else{
						if(this.buy_num < remaining){
							this.buy_num ++;
						}else{
							this.toast("您购买的商品数量已达到商品限购数量")
						}
					}
				}else{//不限购
					if(this.buy_num < stock){
						this.buy_num++;
					}else{
						this.toast("您购买的商品数量已达到商品库存数量")
					}
				}
			},
			// 打开优惠券弹窗
			openFavorable() {
				if (this.productDetail.coupon > 0) {
					coupon({
						id: this.productDetail.id
					}).then(res => {
						if (res.code == 1) {
							// console.log(res)
							if (res.msg.length) {
								// this.discountlist = res.msg
								let coupon = JSON.parse(JSON.stringify(res.msg));
								coupon.map(item => {
									item.tipsShow = false;
								})
								this.discountlist = coupon;
								this.getMoreDiscountPrice()
								this.$refs.favorable.open();
							} else {
								this.toast("暂无可领优惠券")
							}
						} else if (res.code == 4) {
							this.$emit('login')
						} else {
							this.toast(res.msg)
						}
					}).catch()
				}
			},
			//循环获取最多抵扣金额
			getMoreDiscountPrice() {
				let list = this.discountlist;
				list.forEach((item, ind) => {
					if (this.moreDiscountPrice < item.user_price) {
						this.moreDiscountPrice = item.user_price
					}
				})
			},
			closeDrawer() {
				// this.drawFlag = false
			},
			//优惠券说明
			Tips(index) {
				this.discountlist.forEach((item, ind) => {
					// console.log("点击" + ind, item.tipsShow)
					if (ind == index) {
						// let flag = !item.tipsShow
						item.tipsShow = !item.tipsShow
					} else {
						item.tipsShow = false
					}
				})
			},
			//选取优惠券
			select(index) {
				this.discountlist.forEach((item, ind) => {
					if (ind == index) {
						item.check = !item.check
						// this.priceCoupon()
					} else {
						item.check = false
					}
				})
			},
			//领取优惠券
			coupondraw: debounce(function(index, item) {
				userCoupon({
					id: item.id
				}).then(res => {
					if (res.code == 1) {
						this.toast(res.msg)
						this.discountlist[index]['use_state'] = 1;
					} else {
						this.toast(res.msg)
					}
				}).catch()
			}, 500),
			// 打开规格选择
			choosestandard() {
				// this.standardState = 0,
				this.$refs.standard.open();
				this.chooseflag = true

			},
			//点击分享
			sharpro() {
				this.$refs.share.open();
			},
			closestand() {
				this.chooseflag = false
				this.$refs.standard.close();
				this.$refs.share.close();
				this.$refs.favorable.close();
			},
			//生成分享图
			sharebanner() {
				this.$refs.share.close();
				this.$refs.sharebanner.show = true;
			},
			toNext(){
				this.$refs.standard.close();
				this.chooseflag = false
				if (this.standardState == 2) {
					this.submitOrder()
				} else {
					this.addCart()
				}
			},
			// 确定规格
			confirmStand() {
				let limit_num = this.productDetail.limit_num //限购数量
				let remaining = limit_num - this.productDetail.user_buy_num //限购数量 - 已买数量
				let stock = 0 //库存数量
				if (this.showSize) {
					stock = this.detailkutype.Stock
				} else {
					stock = this.productDetail.stock
				}
				if(this.detailSku.totalSize.length != this.detailkutype.subIndex.length){
					this.toast("请选择商品规格");
					return;
				}
				if(limit_num > 0){//限购
					if(remaining > stock){ //还剩的限购数量>库存
						if(this.buy_num > stock){
							// console.log("限购")
							this.toast("您购买此商品的数量已超过商品库存")
						}else{
							this.toNext()
						}
					}else{//还剩的限购数量<库存
						if(this.buy_num > remaining){
							this.toast("您的购买数量已超出商品限购数量")
						}else{
							this.toNext()
						}
					}
				}else{//不限购
					 if(this.buy_num > stock){
						 // console.log("不限购")
						this.toast("您购买此商品的数量已超过商品库存")
					}else{
						this.toNext()
					}
				}
			},
			submitOrder() {
				// console.log(this.detailkutype.selectArr)
				// console.log(this.productDetail)
				let params = {
					goods_id: this.productDetail.id,
					num: this.buy_num,
					size: this.detailkutype.selectArr.toString(),
				}
				// console.log(params)
				skillNormalOrderSubmit(params).then(res => {
					// console.log(res)
					let pa = {
						type: 1,
						...params
					}
					let data = JSON.stringify(pa);
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pageB/order/confirmorder?data=' + data
						});
					} else if (res.code == 4) {
						this.$emit('login')
					} else {
						this.toast(res.msg)
					}
				}).catch()
			},
			//添加到购物车
			addCart() {
				let params = {
					goods_id: this.productDetail.id,
					num: this.buy_num,
					specs: this.detailkutype.selectArr.toString(),
				}
				this.addCartGoods(params).then(res => {
					if (res.code == 1) {
						this.toast(res.msg)
					} else if (res.code == 4) {
						this.$emit('login')
					} else {
						this.toast(res.msg)
					}
				}).catch();
			},

			// 立即购买
			rightNowBuy() {
				// 改变规格的状态 判断是该加入购物车 还是跳转到下一页
				this.standardState = 2
				if (this.chooseflag) {
					this.confirmStand()
				} else {

					this.$refs.standard.open()
				}

			},
			// 加入购物车 
			joinCart() {
				this.standardState = 1
				if (this.chooseflag) {
					this.confirmStand()
				} else {
					this.$refs.standard.open()
				}

			},
			// 联系客服
			toservice() {
				this.$refs.customer.show = true;
			},
		}
	}
</script>

<style scoped lang="less">
	.top_banner {
		position: relative;
		width: 100%;
		height: 750upx;

		.pic_num {
			position: absolute;
			bottom: 20upx;
			right: 30upx;
			border: 2upx solid #999;
			padding: 4upx 16upx;
			font-size: 28upx;
			color: #fff;
			background: #2C2C2C;
			border-radius: 25upx;
			opacity: 0.4;
		}
	}

	.swiper {
		position: relative;
		width: 100%;
		height: 750upx;

		.pic {
			width: 100%;
			height: 100%;
		}
	}

	.goods {
		position: relative;
		background: #fff;
		padding: 30upx 30upx;
		border-bottom: 20upx solid #F9F9F9;
		font-size: 36upx;

		.title2 {
			margin-top: 10upx;
			font-size: 30upx;
			color: #999;
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.goods_price {
			margin-top: 10upx;
			color: red;
			font-size: 26upx;

			text {
				font-size: 32upx;
				font-weight: 700;
			}
		}

		.goods_right {
			position: absolute;
			right: 30upx;
			bottom: 32upx;
			font-size: 26upx;
			color: #999;
		}

		.price {
			margin-top: 10upx;
			display: flex;
			align-items: flex-end;
		}

		.price_now {
			color: #FF2842;
			font-size: 26upx;

			text {
				font-size: 34upx;
				font-weight: 700;
			}
		}

		.price_line {
			margin-left: 15upx;
			font-size: 24upx;
			color: #656565;
			padding-bottom: 5upx;
			text-decoration: line-through;
		}
	}

	.choose_item {
		padding: 0 30upx;
		background-color: #ffffff;
	}

	// 优惠
	.favorable {
		width: 100%;
		padding: 35upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;

		.icon {
			font-size: 28upx;
			color: #999999;
			height: 28upx;
		}

		.favorable_f {
			display: flex;
			align-items: center;
		}

		.favorable_tips {
			font-size: 28upx;
			line-height: 28upx;
			color: #999999;
			margin-right: 20upx;
		}

		.favorable_favorable_redpaper {
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;

			text {
				color: #f73e2f;
			}
		}

		.favorable_favorable_coupon {
			display: flex;
			align-items: flex-start;

			.hint {
				width: 80upx;
				height: 36upx;
				font-size: 28upx;
				color: #FFFFFF;
				background-color: #f73e2f;
				border-radius: 4upx;
				text-align: center;
				line-height: 36upx;
			}

			.discount_coupon {
				font-size: 28upx;
				margin-left: 10upx;
				line-height: 36upx;
			}
		}
	}

	// 规格
	.standard {
		width: 100%;
		padding: 35upx 0 40upx;
		border-bottom: 20upx solid #F9F9F9;
		display: flex;
		align-items: center;

		.standard_tips {
			font-size: 30upx;
			color: #999999;
			line-height: 30upx;
			margin-right: 20upx;
		}

		.standard_choose {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			line-height: 40upx;

			.icon {
				font-size: 28upx;
				color: #999999;
				// height: 28upx;
			}
		}
	}

	// 商品详情
	.goods_detail {
		padding: 30upx;
		background-color: #fff;
		font-size: 36upx;

		.goods_detail_2 {
			font-size: 28upx;
			color: #999;
			margin: 12upx 0;
		}

		image {
			margin: 12upx 0 0;
			width: 100%;
		}
	}

	// 底部按钮
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10upx 30upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;


		.bottom_left {
			flex: 1;
			display: flex;

			.relay,
			.customerService {
				flex: 1;
				padding: 10upx 15upx;
				font-size: 26upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				color: #999;

				image {
					width: 40upx;
					height: 40upx;
					margin-bottom: 10upx;
				}
			}
		}

		.bottom_right {
			width: 520upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 25upx;
			overflow: hidden;
			text-align: center;
			margin-left: 6upx;
			margin-bottom: 6upx;
			font-size: 30upx;
			display: flex;

			.btn_left {
				flex: 1;
				text-align: center;
				background: #FCE8EB;
				color: #FF2842;
			}

			.btn_right {
				flex: 1;
				text-align: center;
				background: #FF2842;
				color: #fff;
			}
		}
		.btn_noStock{
			width: 520upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 25upx;
			overflow: hidden;
			text-align: center;
			margin-left: 6upx;
			margin-bottom: 6upx;
			font-size: 30upx;
			background: -webkit-linear-gradient(left, #777777 0%, #B8B8B8 100%);
			color: #FFFFFF;
		}

	}

	//优惠劵弹窗
	.favorableBox {
		width: 100%;
		height: 710upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 30upx 0;
		box-sizing: border-box;
		position: relative;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 30upx;
			top: 30upx;
		}

		.favorableBox_title {
			font-size: 32upx;
			color: #000000;
			text-align: center;
		}

		.favorableBox_redpaper {
			padding-left: 30upx;
			box-sizing: border-box;
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;
			margin: 30upx 0;

			text {
				color: #FF2842;
			}
		}

		.favorableBox_title_t {
			padding-left: 30upx;
			box-sizing: border-box;
			font-size: 28upx;
			color: #000000;
		}

		.favorableBox_discount {
			width: 100%;
			margin-top: 20upx;
			padding: 15upx 30upx;
			box-sizing: border-box;
			height: 480upx;
			background-color: #fff;

			.list {
				width: 100%;
				height: 140upx;
				margin: auto;
				margin-bottom: 20upx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.list_content {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					align-items: center;

					.price {
						width: 210upx;
						height: 140upx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price_p {
							font-size: 28upx;
							color: #FFFFFF;

							text {
								font-size: 40upx;
								font-weight: bold;
							}
						}

						.price_rule {
							margin-top: 10upx;
							font-size: 24upx;
							color: #FFFFFF;
							white-space: nowrap;
						}
					}

					.info {
						width: 340upx;
						height: 100%;
						padding: 20upx 0;
						padding-left: 25upx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.info_title {
							font-size: 28upx;
							color: #000;
							line-height: 28upx;
						}

						.info_detail {
							font-size: 24upx;
							color: #333333;
							line-height: 24upx;
						}

						.info_date {
							margin-top: 20upx;
							font-size: 24upx;
							color: #333333;
							line-height: 24upx;
						}
					}

					.getdiscount {
						width: 120upx;
						background: linear-gradient(to right, #fe7b71 0%, #f73e2f 100%);
						height: 40upx;
						border-radius: 20upx;
						text-align: center;
						line-height: 40upx;
						color: #FFFFFF;
						font-size: 24upx;
					}

					.getdiscount_end {
						background: -webkit-linear-gradient(left, #aaaaaa 0%, #B8B8B8 100%);
					}
				}
			}
		}
	}

	// 规格弹窗
	.standard_content {
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 50upx 30upx;
		box-sizing: border-box;
		position: relative;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 30upx;
			top: 50upx;
		}

		.product_info {
			display: flex;
			align-items: center;
		}

		.pro_pic {
			width: 184upx;
			height: 184upx;
			border-radius: 20upx;
			margin-right: 20upx;
		}

		.product_info_info {
			height: 184upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.price {
			font-size: 30upx;
			color: #FF2842;

			.price_line {
				font-size: 24upx;
				color: #666;
				text-decoration: line-through;
				margin-left: 10upx;
			}

			.price_flag {
				font-size: 24upx;
			}

		}

		.inventory {
			font-size: 24upx;
			color: #999999;
			line-height: 55upx;
		}

		.tochoose {
			font-size: 24upx;
			color: #333333;

			text {
				margin-left: 10upx;
			}
		}

		.weight {
			margin-top: 50upx;

			.tilte {
				font-size: 28upx;
				color: #000000;
				margin-bottom: 10upx;
			}

			.choose_weight {
				display: flex;
				white-space: nowrap;

				.product_weight {
					display: inline-block;
					height: 48upx;
					padding: 0 10upx;
					box-sizing: border-box;
					line-height: 48upx;
					font-size: 24upx;
					margin-right: 20upx;
					background-color: #f9f9f9;
					border-radius: 8upx;
					color: #333;
				}

				.product_weight_i {
					background-color: #f73e2f;
					color: #FFFFFF;
				}
			}

			.choose_weight_list {
				display: flex;
				flex-wrap: wrap;

				.product_weight {
					// width: 20%;
					padding:0 15upx;
					margin: 10upx;
					text-align: center;
					display: inline-block;
					height: 55upx;
					box-sizing: border-box;
					line-height: 55upx;
					font-size: 26upx;
					margin-right: 20upx;
					background-color: #f9f9f9;
					border-radius: 8upx;
					color: #333;
					border: 2upx solid #FFFFFF;
				}

				.product_weight_i {
					// background-color: #f73e2f;
					// color: #FFFFFF;
					color: #f73e2f;
					border: 2upx solid #f73e2f;
					background: #FEF9FA;
				}

				.product_weight_n {
					background-color: #F9F9F9;
					color: #CCCCCC;
				}
			}

			.product_size {
				width: 28%;
				display: inline-block;
				height: 48upx;
				margin: 10upx;
				text-align: center;
				box-sizing: border-box;
				background-color: #f9f9f9;
				line-height: 48upx;
				font-size: 24upx;
				margin-right: 20upx;
				border-radius: 8upx;
				color: #333;
			}

			.product_size_i {
				background-color: #f73e2f;
				color: #FFFFFF;
			}
		}

		.btn {
			width: 100%;
			height: 90upx;
			background: #FF2741;
			margin-top: 56upx;
			font-size: 34upx;
			text-align: center;
			line-height: 90upx;
			color: #FFFFFF;
			border-radius: 16upx;
		}

		.buy_num {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 66upx 0;

			.title {
				font-size: 28upx;
				color: #000000;
				line-height: 40upx;

				text {
					font-size: 24upx;
					color: #b3b3b3;
				}
			}

			.num {
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #000000;
				line-height: 40upx;

				text {
					margin: 0 24upx;
				}

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}

		.bot_choose {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 25upx;
			height: 90upx;
			line-height: 100upx;
			border-radius: 16upx;
			overflow: hidden;
			font-size: 34upx;

			.btn_left,
			.btn_right {
				flex: 1;
				text-align: center;
			}

			.btn_left {
				background: #FCE8EB;
				color: #FF2842;
			}

			.btn_right {
				background: #FF2842;
				color: #fff;
			}
		}
		.btn_noStock{
			width: 100%;
			height: 90upx;
			background: -webkit-linear-gradient(left, #777777 0%, #B8B8B8 100%);
			margin-top: 56upx;
			font-size: 34upx;
			text-align: center;
			line-height: 90upx;
			color: #FFFFFF;
			border-radius: 16upx;
		}
	}

	// 分享弹窗
	.product_share {
		width: 100%;
		height: 340upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		overflow: hidden;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 30upx;
			top: 30upx;
		}

		.product_share_title {
			font-size: 32upx;
			color: #000000;
			text-align: center;
			margin-top: 30upx;
		}

		.product_share_way {
			width: 100%;
			padding: 0 100upx;
			margin-top: 50upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;

			.product_share_way_item {
				text-align: center;

				image {
					width: 90upx;
					height: 90upx;
					display: block;
					margin: auto;
				}

				text {
					font-size: 28upx;
					color: #333333;
				}
			}

			.share-btn {
				margin: 0;
				padding: 0;
				background-color: #FFFFFF;
				border-radius: 0;
				line-height: 1.4;

				&::after {
					border: none;
				}
			}
		}
	}

	// .sharebanner_bg {
	// 	width: 600upx;
	// 	height: 950upx;
	// 	border-radius: 15upx;
	// 	overflow: hidden;
	// 	position: relative;

	// 	image {
	// 		width: 100%;
	// 		height: 100%;

	// 	}
	// }

	// .save_pic {
	// 	width: 250upx;
	// 	height: 80upx;
	// 	box-sizing: border-box;
	// 	font-size: 32upx;
	// 	color: #FFFFFF;
	// 	text-align: center;
	// 	line-height: 80upx;
	// 	border-radius: 40upx;
	// 	margin: auto;
	// 	margin-top: 30upx;
	// 	background: #0390FD;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	image{
	// 		margin-right: 10upx;
	// 		width: 38upx;
	// 		height: 34upx;
	// 	}
	// }

	// 拼团弹框
	// .team {
	// 	width: 100%;
	// 	height: 680upx;
	// 	background-color: #FFFFFF;
	// 	border-top-left-radius: 20upx;
	// 	border-top-right-radius: 20upx;
	// 	position: relative;
	// 	overflow: hidden;
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;

	.makesure_group {
		width: calc(100% - 60upx);
		height: 82upx;
		margin: 0 auto;
		margin-top: 40upx;
		background: #FF2741;
		// box-shadow: 2upx 2upx 6upx 0 #FF2842;
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 82upx;
	}

	// 	.erricon {
	// 		font-size: 32upx;
	// 		color: #999999;
	// 		position: absolute;
	// 		right: 20upx;
	// 		top: 20upx;
	// 		margin-bottom: 48upx;
	// 		line-height: 32upx;
	// 	}

	// 	.team_one {
	// 		font-size: 32upx;
	// 		color: #333333;
	// 		margin-bottom: 50upx;
	// 	}

	// 	.team_product_title {
	// 		font-size: 24upx;
	// 		color: #999999;
	// 		line-height: 24upx;
	// 		margin-bottom: 30upx;
	// 	}

	// 	.team_count_down {
	// 		font-size: 28upx;
	// 		color: #333333;
	// 		margin-bottom: 35upx;
	// 		display: flex;
	// 		align-items: center;
	// 	}

	// 	.ream_residue_num {
	// 		font-size: 24upx;
	// 		color: #333333;
	// 		margin-top: 60upx;
	// 	}

	// 	.makesure_group {
	// 		width: calc(100% - 60upx);
	// 		height: 82upx;
	// 		margin: 0 auto;
	// 		margin-top: 40upx;
	// 		background: #FF2741;
	// 		// box-shadow: 2upx 2upx 6upx 0 #fc5c2f;
	// 		border-radius: 10upx;
	// 		color: #FFFFFF;
	// 		text-align: center;
	// 		line-height: 82upx;
	// 	}

	// 	.team_user_header {
	// 		display: flex;
	// 		width: 380upx;
	// 		justify-content: space-between;

	// 		.header_pic {
	// 			width: 108upx;
	// 			height: 108upx;
	// 			border: 2upx dashed #E1E1E1;
	// 			border-radius: 50%;
	// 			padding: 4upx;
	// 			box-sizing: border-box;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;

	// 			image {
	// 				width: 100%;
	// 				height: 100%;
	// 				border-radius: 50%;
	// 			}

	// 			.query {
	// 				width: 18upx;
	// 				height: 27upx;
	// 			}
	// 		}

	// 		.header_pic:first-child {
	// 			border: none;
	// 			background-color: #f73e2f;
	// 			position: relative;

	// 			.colonel {
	// 				width: 82upx;
	// 				height: 36upx;
	// 				border-radius: 8upx;
	// 				font-size: 24upx;
	// 				color: #FFFFFF;
	// 				text-align: center;
	// 				line-height: 36upx;
	// 				background: linear-gradient(to right, #f83008 0, #fa7968 100%);
	// 				position: absolute;
	// 				left: 50%;
	// 				bottom: -10upx;
	// 				transform: translate(-50%);
	// 			}
	// 		}
	// 	}
	// }
	.customer {
		position: relative;
		background-color: #fff;
		// width: calc(100% - 30upx);
		border-radius: 15upx;
		width: 564upx;
		height: 720upx;
		position: relative;
		overflow: hidden;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}

		.banner_top {
			width: 100%;
			height: 220upx;
			background: #63C3A5;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			image {
				width: 238upx;
				height: 176upx;
			}
		}

		.banner_bottom {
			padding: 0 50upx;

			.banner_code {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20upx;

				image {
					width: 222upx;
					height: 222upx;
				}
			}

			.banner_tel {
				height: 68upx;
				background: #FF2842;
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 68upx;
				border-radius: 35upx;
				margin: 0 10upx;
			}

			.banner_info {
				margin: 35upx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;

				.weixin {
					color: #666;
				}

				.copy {
					margin-left: 10upx;
					color: #0390FD;

					image {
						width: 25upx;
						height: 23upx;
						vertical-align: middle;
					}
				}
			}

			.banner_time {
				color: #999;
				font-size: 24upx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 35upx;
			}
		}


	}
</style>
<style>
	page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>
